<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>客服机器人</title>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/jquery-weui/dist/js/jquery-weui.min.js"></script>
    <!--<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>-->
    <link rel="stylesheet" href="node_modules/jquery-weui/dist/css/jquery-weui.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/index.js"></script>
</head>
<body>
<!--    导航栏    -->
<nav>
    <span>机器人</span>
    <img src="images/back.png" alt="返回">
</nav>
<!--    消息列表    -->
<div class="messageList">
    <div class="come">
        <img src="images/avatar.png" alt="头像" class="avatar">
        <div class="content">您好，我是法律咨询机器人，请问需要咨询什么问题？</div>
    </div>
    <div id="suggest" class="suggest">
        <h3>常见问题：</h3>
        <div class="suggesstBox">
            <ul>
                <li>屋主欠尾款不给，没有签合同，要如何追缴？</li>
                <li>车和登记证书都不在我手里能销户吗？</li>
                <li>人身损害赔偿医疗费怎么算？</li>
                <li>请一个律师和对方的律师来赔偿多少的问题？</li>
                <li>拐卖儿童罪与拐骗儿童罪的五大区别？</li>
                <li>用人单位是否有权调整员工工作岗位?</li>
                <li>屋主欠尾款不给，没有签合同，要如何追缴？</li>
                <li>车和登记证书都不在我手里能销户吗？</li>
                <li>人身损害赔偿医疗费怎么算？</li>
            </ul>
        </div>
    </div>
    <div class="come">
        <img src="images/avatar.png" alt="头像" class="avatar">
        <div class="content">据巴基斯坦《论坛报》报道，印军27日在印控克什米尔地区绍皮恩县向手无寸铁的抗议者开火，造成2名青年死亡，另有1人重伤。报道指出，印度政府下令对此事进行官方调查</div>
    </div>
    <div class="come">
        <img src="images/avatar.png" alt="头像" class="avatar">
        <div class="content">海关总署新闻发言人张广志说，2017年11月10日起海关部门启动这项专项稽查，覆盖申领《固体废物进口许可证》的全部291家废五金加工利用企业。稽查发现，部分企业存在申报不实、进口资质与加工能力不匹配等问题</div>
    </div>
    <div class="to">
        <img src="images/avatar2.jpeg" alt="头像" class="avatar">
        <div class="content">破重大军事间谍案</div>
    </div>
    <div class="to">
        <img src="images/avatar2.jpeg" alt="头像" class="avatar">
        <div class="content">美国又犯心病了：“我们要建立一个网络，让中国无法监听你的电话”</div>
    </div>
    <div class="come">
        <img src="images/avatar.png" alt="头像" class="avatar">
        <div class="content">动力煤1个月大涨13% 五大发电集团煤电板块狂亏400亿元</div>
    </div>
    <div class="to">
        <img src="images/avatar2.jpeg" alt="头像" class="avatar">
        <div class="content">此前，美国科技网站Axios爆料了一份机密幻灯片文件和一份备忘录。这些材料称，美国应该建一个集中化、全国性5G网络，在3年之内建成。而如何建造、钱从哪里来等问题，特朗普政府内部将会进行激烈的争论</div>
    </div>
    <div class="to">
        <img src="images/avatar2.jpeg" alt="头像" class="avatar">
        <div class="content">海关部门还在专项稽查中发现有企业在进口废铝切片中夹杂国家禁止进口的废旧汽车安全气囊引爆器，涉嫌走私洋垃圾，涉及货物总量2758吨。海关已将该线索移交相关部门处理</div>
    </div>
    <div class="come">
        <img src="images/avatar.png" alt="头像" class="avatar">
        <div class="content">报道称，5G网络的概念旨在解决美国官员眼中的中国对美国网络安全和经济安全的“威胁”</div>
    </div>
    <div class="come">
        <img src="images/avatar.png" alt="头像" class="avatar">
        <div class="content">对美国网络安全和经济安全</div>
    </div>
    <div class="to">
        <img src="images/avatar2.jpeg" alt="头像" class="avatar">
        <div class="content">美国议员此前曾以国家安全为由，迫使美国第二大无线运营商AT&T为其客户提供中国华为手机的计划。美国政府还阻止了一系列中资收购</div>
    </div>
    <div class="to">
        <img src="images/avatar2.jpeg" alt="头像" class="avatar">
        <div class="voice unselectable"><div class="second" style="width: 80px;">15s"</div><span class="voiceWave"></span></div>
    </div>
    <div class="to">
        <img src="images/avatar2.jpeg" alt="头像" class="avatar">
        <div class="voice unselectable"><div class="second" style="width: 175px;">35s"</div><span class="voiceWave"></span></div>
    </div>
</div>
<!--    底部输入栏   -->
<div class="inputBar">
    <div class="textBox">
        <div class="leftItem" id="recordIcon"></div>
        <input type="text" placeholder="请输入您的问题...">
        <div class="rightItem" id="sendBtn"></div>
    </div>
    <div class="voiceBox">
        <div class="leftItem" id="keyboradBtn"></div>
        <div class="recordBtn unselectable">按住说话</div>
    </div>
</div>
<!--    录音弹窗   -->
<div class="recordToast">
    <div class="recordStatusIcon"></div>
    <!--<img src="images/record.png" alt="状态" class="recordStatusIcon">-->
    <div class="recordStatus">手指上滑,取消发送</div>
</div>
</body>
</html>